<template>
  <div id="card_conter" :style="{ '--color': `${themeColor}` }">
    <c-title :hide="false" :text="'名片'"></c-title>
    <div class="card_a">
      <div style="border-radius: 0.625rem;overflow: hidden;">
        <div class="header_box" :style="bacImage">
          <div class="header">
            <div class="img">
              <img :src="cardData.card_avatar" />
            </div>
            <div class="collect" @click="changeLike('1')">
              <i v-if="!clickStatus.collected" class="iconfont icon-bc_like_normal"></i>
              <i v-if="clickStatus.collected" class="iconfont icon-bc_like"></i>
              <span class="people">{{ collection }}人收藏</span>
            </div>
          </div>
          <ul class="per_info">
            <li style="display: flex; flex-direction: column; margin-bottom: 1rem;">
              <p class="card-name">{{ cardData.card_name }}</p>
              <div>
                <span class="role-name">{{ cardData.role_name }}</span>
                <span class="level-name" v-if="level_name">{{ level_name }}</span>
              </div>
              <div class="flex-a-c" v-if="AllData.auth">
                <div class="flex-a-c certification-box certification-box-bg-fff">
                  <i class="iconfont icon-baoming"></i>
                  <div class="text">{{AllData.auth.person.status?'会员已认证':'会员未认证'}}</div>
                </div>
                <div class="flex-a-c certification-box">
                  <i class="iconfont icon-icon_company"></i>
                  <div class="text">{{AllData.auth.company.length > 0?'企业已认证':'企业未认证'}}</div>
                </div>
              </div>
            </li>
            <li v-if="cardData.card_mobile" class="items-center">
              <i class="iconfont icon-zx_map_tel"></i>
              <a :href="`tel:${cardData.card_mobile}`" class="fz-24">{{ cardData.card_mobile }}</a>
            </li>
            <li v-if="cardData.card_wechat" class="items-center">
              <i class="iconfont icon-card_weixin"></i>
              <span class="fz-24">{{ cardData.card_wechat }}</span>
            </li>
            <li v-if="!this.fun.isTextEmpty(cardData.company)&& !AllData.auth" class="items-center">
              <i class="iconfont icon-gongsi"></i>
              <span class="fz-24">{{ cardData.company }}</span>
            </li>
            <li v-if="AllData.auth && AllData.auth.company && AllData.auth.company[0]" class="items-center">
              <i class="iconfont icon-gongsi"></i>
              <span class="fz-24">
                <em v-for="(company,cindex) in AllData.auth.company" :key="cindex">{{company.name}}<br></em>
              </span>
            </li>

            <li class="position items-center" v-if="areas">
              <i class="iconfont icon-zx_map_locate1"></i>
              <span class="fz-24" style="-webkit-box-orient: vertical;">{{ areas }}</span>
            </li>
          </ul>
        </div>

      </div>
      <div class="card_button">
        <button type="button" @click="toCardVisit">分享名片</button>
        <button type="button" v-clipboard:copy="cardData.card_mobile" v-clipboard:success="onCopy"
          v-clipboard:error="onError" class="other" v-if="cardData.card_mobile">
          复制号码
        </button>
      </div>
    </div>
    <!-- 名片码 -->
    <div class="code_box">
      <div class="code_right">
        <div class="contact_box" v-if="cardData.card_mobile">
          <div class="flex">
            <i class="iconfont icon-zx_map_tel"></i>
            <div class="con_top" style="display: flex; flex-direction: column;">
              <span class="con_top_title">电话</span>
              <span>{{ cardData.card_mobile }}</span>
            </div>
          </div>
          <a :href="`tel:${cardData.card_mobile}`" class="call_mobile">拨打电话</a>
        </div>
        <div class="contact_box" v-if="cardData.card_wechat && cardData.wechat_type != 1">
          <div class="flex">
            <i class="iconfont icon-card_weixin"></i>
            <div class="con_top" style="display: flex; flex-direction: column;">
              <span class="con_top_title">微信号</span>
              <span>{{ cardData.card_wechat }}</span>
            </div>
          </div>
          <div class="call_mobile" v-clipboard:copy="cardData.card_wechat" v-clipboard:success="onCopy"
            v-clipboard:error="onError">添加微信</div>
        </div>
        <div class="contact_box" v-if="cardData.wechat_type == 1" @click="show2 = !show2">
          <div class="flex">
            <i class="iconfont icon-card_weixin"></i>
            <div class="con_top" style="display: flex; flex-direction: column;">
              <span class="con_top_title">微信</span>
              <span>点我加好友</span>
            </div>
          </div>
          <div class="call_mobile">添加微信</div>
        </div>
        <div class="contact_box" v-if="areas" >
          <div class="flex">
            <i class="iconfont icon-zx_map_locate1"></i>
            <div class="con_top" style="display: flex; flex-direction: column;">
              <span class="con_top_title">公司地址</span>
              <span style="margin-right: 1.1875rem;">{{ areas }}</span>
            </div>
          </div>
          <div class="call_mobile" v-if="cardData.longitude && cardData.latitude" @click="goToWXAdress">导航到这</div>
          <div v-else class="call_mobile" v-clipboard:copy="areas" v-clipboard:success="onCopy"
            v-clipboard:error="onError">复制地址
          </div>
        </div>
      </div>
    </div>
    <!-- 浏览人数 靠谱 -->
    <div class="user_box">
      <div class="user_photo">
        <div class="pho1" v-for="(item, ind) in AllData.member_avatar" :key="ind">
          <img :src="item.avatar_image" alt />
        </div>
        <span v-if="visit">{{ visit }}次浏览</span>
      </div>
      <div class="user_txt">
        <i @click="changeLike('2')" class="iconfont icon-dianzan" v-if="!clickStatus.reliabled"></i>
        <i @click="changeLike('2')" class="iconfont icon-zb_like" v-if="clickStatus.reliabled"></i>
        <p>靠谱{{ reliable }}</p>
      </div>
    </div>
    <!-- 我的成就 -->
    <div class="my_achieve" v-if="nums.visit_statistics">
      <div class="title">我的成就</div>
      <div class="code_right2">
        <div class="contact_box3">
          <div class="con_top">
            <span>累计访问次数</span><span style="margin-left: 0.3125rem;">(次)</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.visit_statistics.visit }}</span>
          </div>
        </div>

        <div class="contact_box3">
          <div class="con_top">
            <span>累计访问人数</span><span style="margin-left: 0.3125rem;">(人)</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.visit_statistics.visitor_num }}</span>
          </div>
        </div>

        <div class="contact_box3" v-if="nums.hasOwnProperty('all_income')">
          <div class="con_top">
            <span>{{ income_name_text }}<span style="margin-left: 0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.all_income }}</span>
          </div>
        </div>
        <!-- 我的成就——会员 -->
        <div class="contact_box3"
          v-if="(cardType === 'member' || cardType === 'team_dividend' || cardType === 'commission') && nums.hasOwnProperty('child_total')">
          <div class="con_top">
            <span>客户数量</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.child_total }}</span>
          </div>
        </div>
        <div class="contact_box3"
          v-if="(cardType === 'member' || cardType === 'team_dividend' || cardType === 'commission') && nums.hasOwnProperty('child_order_money')">
          <div class="con_top">
            <span>客户订单金额<span style="margin-left: 0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.child_order_money }}</span>
          </div>
        </div>
        <div class="contact_box3"
          v-if="(cardType === 'member' || cardType === 'team_dividend' || cardType === 'commission') && nums.hasOwnProperty('team_total')">
          <div class="con_top">
            <span>客户总数量</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.team_total }}</span>
          </div>
        </div>

        <div class="contact_box3"
          v-if="(cardType === 'member' || cardType === 'team_dividend' || cardType === 'commission') && nums.hasOwnProperty('team_order_money')">
          <div class="con_top">
            <span>客户总订单金额<span style="margin-left: 0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.team_order_money }}</span>
          </div>
        </div>
        <!-- 我的成就——招商员 -->
        <div class="contact_box3" v-if="(cardType === 'staff' || cardType === 'center') && nums.hasOwnProperty('count')">
          <div class="con_top">
            <span>招募商家数</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.count }}</span>
          </div>
        </div>

        <div class="contact_box3" v-if="(cardType === 'staff' || cardType === 'center') && nums.hasOwnProperty('amount')">
          <div class="con_top">
            <span>招募商家订单总额<span style="margin-left:0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.count }}</span>
          </div>
        </div>
        <!-- 我的成就——区域代理 -->
        <div class="contact_box3" v-if="cardType === 'area_dividend' && nums.hasOwnProperty('count')">
          <div class="con_top">
            <span>区域订单数</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.count }}</span>
          </div>
        </div>

        <div class="contact_box3" v-if="cardType === 'area_dividend' && nums.hasOwnProperty('amount')">
          <div class="con_top">
            <span>区域订单总额<span style="margin-left: 0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.amount }}</span>
          </div>
        </div>
        <!-- 我的成就——供应商 -->
        <div class="contact_box3" v-if="cardType === 'supplier' && nums.hasOwnProperty('count')">
          <div class="con_top">
            <span>供应商订单数</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.count }}</span>
          </div>
        </div>

        <div class="contact_box3" v-if="cardType === 'supplier' && nums.hasOwnProperty('amount')">
          <div class="con_top">
            <span>供应商订单总额<span style="margin-left: 0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.amount }}</span>
          </div>
        </div>
        <!-- 我的成就——店长 -->
        <div class="contact_box3"
          v-if="(cardType === 'shop_owner' || cardType === 'clerk') && nums.hasOwnProperty('count')">
          <div class="con_top">
            <span>门店订单数</span>
          </div>
          <div class="con_bom">
            <span>{{ nums.count }}</span>
          </div>
        </div>

        <div class="contact_box3"
          v-if="(cardType === 'shop_owner' || cardType === 'clerk') && nums.hasOwnProperty('amount')">
          <div class="con_top">
            <span>门店订单总额<span style="margin-left: 0.3125rem;">(元)</span></span>
          </div>
          <div class="con_bom">
            <span>{{ nums.amount }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐商家 -->
    <div class="recommend_seller" v-if="cardType === 'staff' || cardType === 'center'">
      <div class="title">我推荐的商家</div>
      <div class="apply_list">
        <div class="apply_box" @click="toPage('supplier')" v-if="member.is_supplier == 1">
          <i class="iconfont icon-shangjia"></i>
          <ul class="apply apply_b">
            <li class="apply_a">申请供应商</li>
          </ul>
        </div>
        <div class="apply_box" @click="toPage('storeApply')" v-if="member.is_store == 1">
          <i class="iconfont icon-dianpu1"></i>
          <ul class="apply apply_c">
            <li class="apply_a">申请门店</li>
          </ul>
        </div>
        <div class="apply_box" @click="toPage('hotelApply')" v-if="member.is_hotel == 1">
          <i class="iconfont icon-gongsi"></i>
          <ul class="apply">
            <li class="apply_a">申请酒店</li>
          </ul>
        </div>
      </div>
      <div class="seller_list_loading">
        <van-tabs v-model="active" @click="chooseTab"  color="var(--themeBaseColor)">
          <van-tab title="供应商" v-if="member.is_supplier == 1">
            <div class="seller_list" v-if="cardList.length!==0">
              <div class="seller_box" v-for="(store, i) in cardList" :key="i" @click.stop="toShop(store.id, 'supplier')">
                <div class="header">
                  <img :src="store&&store.change_logo" />
                </div>
                <ul class="name">
                  <li v-if="store&&store.store_name">{{ store.store_name }}</li>
                  <li class="position" v-if="store">
                    <!-- <i class="iconfont icon-seller-position"></i> -->
                    <span>{{ store.province_name + store.city_name + store.district_name }}</span>
                  </li>
                </ul>
                <i class="fa fa-angle-right"></i>
              </div>
            </div>
          </van-tab>
          <van-tab title="门店" v-if="member.is_store == 1">
            <div class="seller_list" v-if="openTemplate == 0">
              <div class="seller_box" v-for="(store, i) in cardList" :key="i" @click.stop="toShop(store.id, 'store')">
                <div class="header">
                  <img :src="store&&store.thumb" />
                </div>
                <ul class="name">
                  <li>{{ store&&store.store_name }}</li>
                  <li class="position" v-if="store">
                    <!-- <i class="iconfont icon-seller-position"></i> -->
                    <span>{{ store.province_name + store.city_name + store.district_name }}</span>
                  </li>
                </ul>
                <i class="fa fa-angle-right"></i>
              </div>
            </div>
            <template v-if="openTemplate == 1">
              <div v-for="(store, i) in cardList" :key="i" @click.stop="toShop(store.id, 'store')">
                <storelist02 :items="store"></storelist02>
              </div>
            </template>
          </van-tab>
          <van-tab title="酒店" v-if="member.is_hotel == 1">
            <div class="seller_list" v-if="cardList&&cardList.length!==0">
              <div class="seller_box" v-for="(store, i) in cardList" :key="i"
                @click.stop="toShop(store.hotel_id, 'hotel')">
                <div class="header">
                  <img :src="store&&store.thumb" />
                </div>
                <ul class="name" v-if="store">
                  <li>{{ store.hotel_name }}</li>
                  <li class="position">
                    <!-- <i class="iconfont icon-seller-position"></i> -->
                    <span>{{ store.province_name + store.city_name + store.district_name }}</span>
                  </li>
                </ul>
                <i class="fa fa-angle-right"></i>
              </div>
            </div>
          </van-tab>
        </van-tabs>

        <div class="loading" v-if="cardList.length!==0&&showMore">
          <button type="button" @click="loadMore('list')">点击加载更多</button>
        </div>
        <div class="goods_box_none" v-if="(cardList && cardList.length <= 0)">暂无{{active== 1?'门店':active == 2?'酒店':'供应商'}}~</div>
      </div>
    </div>
    <!-- 供应商 -->
    <div class="recommend_seller" v-if="cardType === 'supplier'">
      <div class="supplier-title">供应商</div>
      <div class="seller_list">
        <div class="seller_box" @click.stop="toShop(store.id, 'supplier')">
          <div class="header">
            <img :src="supplier.logo" />
          </div>
          <ul class="name">
            <li>{{ supplier.store_name }}</li>
            <li class="position">
              <i class="iconfont icon-seller-position"></i>
              <span>{{ supplier.province_name + supplier.city_name + supplier.district_name }}</span>
            </li>
          </ul>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
      <div class="goods_list">
        <div class="goods_box" v-for="(item, i) in store_good" :key="i" @click="toGood(item)">
          <div class="img" style="width: 100%; height: 10.5938rem;">
            <img :src="item.change_thumb" style="width: 100%; height: 100%;" />
          </div>
          <ul class="goods_text">
            <li class="name" style="-webkit-box-orient: vertical; font-size: 0.625rem; font-size: 0.75rem;">{{ item.title
            }}</li>
            <li class="price"
              style="color: #e64a40; font-weight: bold; margin-top: 0.6563rem; display: flex; flex-direction: column-reverse;">
              <span class="price_a">
                <font>{{ $i18n.t("money") }}</font>
                {{ item.price }}
              </span>
              <span style="font-size: 0.625rem; color: #777; font-weight: 400; text-decoration: line-through;"
                class="price_b" v-show="parseInt(item.market_price)">{{ $i18n.t("money") }}{{ item.market_price }}</span>
            </li>
          </ul>
        </div>

        <div class="loading" v-if="showMore">
          <button type="button" @click="loadMore('good')">点击加载更多</button>
        </div>

        <div class="goods_box_none" v-if="goods && goods.length <= 0">暂无商品~</div>
      </div>
    </div>
    <!-- 我的门店 -->
    <div class="my_store" v-if="cardType === 'shop_owner' || cardType === 'clerk'">
      <div class="title">我的门店</div>
      <div class="store_info">
        <div class="header_box">
          <ul class="name">
            <li class="name_l1">
              <span>{{ shop_owner.store_name }}</span>
            </li>
            <li v-if="shop_owner.business_hours_start" class="name_time">
              <i class="iconfont icon-seller-time"></i>
              <span>营业时间:{{ shop_owner.business_hours_start }}-{{ shop_owner.business_hours_end }}</span>
            </li>
            <li class="name_phone" v-if="shop_owner.mobile">
              <i class="iconfont icon-card_phone"></i>
              <span>{{ shop_owner.mobile }}</span>
            </li>
            <li class="name_address" v-if="shop_owner.full_address">
              <i class="iconfont icon-seller-position"></i>
              <span>{{ shop_owner.full_address }}</span>
            </li>
          </ul>
          <div class="header" v-if="shop_owner.banner_thum">
            <img :src="shop_owner.banner_thumb" />
          </div>
        </div>
      </div>
      <ul class="into_list">
        <li @click="toShop(shop_owner.id, 'store')">
          <i class="iconfont icon-gouwuche2"></i>
          <span>进店选购</span>
          <i class="iconfont icon-icon_more1"></i>
        </li>
        <li @click="toBuy(shop_owner.id)">
          <i class="iconfont icon-manefanxian"></i>
          <span>优惠买单</span>
          <i class="iconfont icon-icon_more1"></i>
        </li>
      </ul>
      <!-- 添加优惠券 -->
      <div class="coupon" v-if="(coupon_list && coupon_list.length !== 0)">
        <div id="coupon_box">
          <div class="coupon_bg_box">
            <div class="coupon_bg" v-for="(item, index) in coupon_list" :key="index" @click="selectedcoupon(item, index)">
              <ul class="coupon_info">
                <li class="info_bottom">
                  <div>
                    <span v-if="item.coupon_method === 1" style="font-size:0.75rem">{{ $i18n.t("money") }}</span>
                    <font v-if="item.coupon_method === 1" style="font-size:1.25rem">{{ item.deduct }}</font>
                    <font v-if="item.coupon_method === 2">{{ item.discount }}</font>
                    <span v-if="item.coupon_method === 2">折</span>
                  </div>
                  <div style="background: #ccc;" class="receive" v-if="item.received === 3">已抢光</div>
                  <div style="background: #ccc;" class="receive" v-if="item.received === 2">已领取</div>
                  <div style="background: var(--themeBaseColor);" class="receive"
                    v-if="item.received !== 2 && item.received !== 3">立即领取
                  </div>
                </li>
                <li class="info_top">{{ item.name }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="goods_lists">
        <div class="goods_box" v-for="(item, i) in store_good" :key="i" @click="toGood(item)">
          <div class="img">
            <img :src="item.change_thumb" />
          </div>
          <ul class="goods_text">
            <li class="name" style="-webkit-box-orient: vertical;">{{ item.title }}</li>
            <li class="price">
              <span class="price_a">
                <font>{{ $i18n.t("money") }}</font>
                {{ item.price }}
              </span>
              <span class="price_b" v-show="parseInt(item.market_price)">{{ $i18n.t("money") }}{{ item.market_price
              }}</span>
            </li>
          </ul>
        </div>

        <div class="goods_lists-loading" v-if="showMore" @click="loadMore('good')">点击加载更多</div>

        <div class="goods_box_none" v-if="goods && goods.length <= 0">暂无商品~</div>
      </div>
    </div>
    <!-- 推荐商品 -->
    <!-- v-if="cardType === 'member' || cardType === 'team_dividend' || cardType === 'commission' || cardType === 'area_dividend'" -->
    <div class="recommend_goods" v-if="(cardType !== 'supplier' && cardType !== 'shop_owner' && goods && goods.length)">
      <div class="title">推荐商品</div>
      <div class="goods_list">
        <div class="goods_box" v-for="(item, i) in goods" :key="i" @click="toGood(item)">
          <div class="img">
            <img :src="item.thumb" />
          </div>
          <ul class="goods_text">
            <li>
              <p class="name" style="-webkit-box-orient: vertical;">{{ item.title }}</p>
              <div class="price" style="color: #f15353;">{{ $i18n.t("money") }}{{ item.price }}</div>
            </li>
            <li>
              <div class="price_b"> <i class="iconfont icon-gouwuche2"></i></div>
            </li>
          </ul>
        </div>
        <div class="goods_box_none" v-if="(goods && goods.length <= 0 || !goods)">暂无商品~</div>
      </div>
    </div>

    <!-- 导航 我的简介 我的贴子 我的视频 精选文字 -->
    <div class="navBox">
      <van-tabs v-model="istapBtn" swipeable animated color="var(--themeBaseColor)" background="unset" @change="tabChange">
        <van-tab title="我的简介" name="intro">
          <div class="intro">
            <div class="intro_text">
              <p v-if="!cardData.introduction">{{ "什么都没写~" }}</p>
              <div v-html="cardData.introduction" style="white-space: pre-wrap;" v-if="cardData.introduction"></div>
            </div>
            <div class="banner_box">
              <viewer :images="cardData.picture">
                <div class="banner" v-for="(pic, i) in cardData.picture" :key="i">
                  <img :src="pic" />
                </div>
              </viewer>
            </div>
          </div>
        </van-tab>
        <van-tab title="我的帖子" name="postMy" v-if="is_trick == 1 && cardType !== 'area_dividend'">
          <c-flow :showLoading="cisLoadMore" @loadMore="loadMore2('postMy')" :list="newClassification"></c-flow>
        </van-tab>
        <van-tab title="我的视频" name="video" v-if="is_video == 1 && cardType !== 'area_dividend'">
          <c-video :showLoading="roomIsLoadMore" :card_id="card_id" @loadMore="loadMore2('video')"
            :list="isVideo"></c-video>
        </van-tab>
        <van-tab title="精选文章" name="text" v-if="is_article == 1 && cardType !== 'area_dividend'">
          <div class="choiceness_text">
            <div class="text_box" v-for="(item, index) in isArticle" :key="index" @click="toDetail(item, 'text')">
              <div class="intext_box">
                <div class="intext_left">
                  <p>{{ item.title }}</p>
                  <div class="intext_left_bottom">
                    <span style="margin-right: 0.406rem;">{{ item.author }}</span>|
                    <span style="margin-left: 0.406rem;">{{ format(item.virtual_created_at * 1000) }}</span>
                  </div>
                </div>
                <div class="intext_img">
                  <img :src="item.thumb" alt />
                </div>
              </div>
            </div>
            <img v-if="fun.isTextEmpty(isArticle)" style="width: 5rem; margin: 1rem;" src="../../assets/images/blank.png"
              alt />
            <!--<div class="loadNext" @click.stop="loadNext('intro')" v-if="!isintro">-->
            <!--点击加载更多-->
            <!--</div>-->
          </div>
        </van-tab>
        <van-tab title="直播列表" name="live" v-if="is_room == 1 && cardType !== 'area_dividend'">
          <div class="live_list_div" v-if="is_room == 1 && !fun.isTextEmpty(recordsList)">
            <c-live :recordsList="recordsList" :showtitle="false" :isCard="true"></c-live>
            <!--<span class="live_more_btn" v-if="showMoreLive" @click.stop="getLiveList(true)">加载更多</span>-->
          </div>
          <img v-if="fun.isTextEmpty(recordsList)" style="width: 5rem; margin: 1rem;" src="../../assets/images/blank.png"
            alt />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 微信图片弹窗 -->
    <van-popup v-model="show2" position="center" style="width: 85%; background: transparent;">
      <div class="popupImg">
        <i class="iconfont icon-adsystem_icon_cancle " @click="show2 = false"></i>
        <img :src="cardData.wechat_qrcode" alt="">
        <div class="saveImgBtn" @click="saveImgBtn">保存微信二维码</div>
      </div>
    </van-popup>
    <!-- 奖励提示 -->
    <van-popup v-model="show1" :class="{ 'isPc-popup': fun.isPc() }" position="center" round style="width: 80%; top: 45% !important;">
      <div class="reward_bg">
        <ul class="reward_text">
          <li class="title">恭喜您获得访问奖励</li>
          <li class="number" v-if="award && award.point">
            <span class="custom-name" >{{ custom_name.point_name
            }} </span>
            <span class="count">+{{ award.point }}</span>
          </li>
          <li class="number" v-if="award && award.love">
            <span class="custom-name">{{ custom_name.love_name }} </span>
            <span class="count">+{{ award.love }}</span>
          </li>
        </ul>
        <button type="button" class="reward_btn" @click="show1 = false">确定</button>
      </div>
      <van-icon name="close" class="close-popup" @click="show1 = false"/>
    </van-popup>
  </div>
</template>

<script>
import business_card_controller from "./business_card_controller";

export default business_card_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
::v-deep .van-tabs__nav{
  background: unset;
}

.navBox ::v-deep .van-tabs__nav{
  margin-left: .75rem;
  margin-right: .75rem;
}
.seller_list_loading ::v-deep .van-tabs__nav{
  margin-left: .75rem;
}

 ::v-deep .van-tab--active{
  font-weight: bold;
  font-size: .9375rem;
  color: #00001C;
}
 ::v-deep .van-tabs__line{
  width: 1.25rem;
  height: .1875rem;
  border-radius: .9375rem;
}
.call_mobile {
  flex-shrink: 0;
  width: 5rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background: #FFFFFF;
  border-radius: 1.5625rem;
  color: var(--themeBaseColor);
  border: 1px solid var(--themeBaseColor);
}

::v-deep .van-popup--center {
  top: 40% !important;
}

::v-deep .van-popup {
  background: none;
  width: 10.9375rem;
}

.isPc-popup {
  position: fixed !important;
  left: 50% !important;
}

.code_box {
  overflow: hidden;
  overflow-x: auto;
  // padding: 0.2rem 0.781rem 1.4rem 0;
  // background: #fff;
  display: flex;

  .contact_box:last-child {
    padding-bottom: 0;
    border-bottom: unset;
    margin-bottom: 0;
  }

  .contact_box {
    background-color: #fff;
    border-radius: 0.3125rem;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-bottom: 0.8125rem;
    border-bottom: 1px solid #F0F0F1;
    margin-bottom: 0.875rem;

    .con_top {
      font-size: 0.75rem;
      color: #6E6E79;
      white-space: nowrap;

      span {
        white-space: pre-wrap;
      }
    }

    .con_top_title {
      font-size: 0.875rem !important;
      font-weight: bold !important;
      color: #00001c !important;
    }

    .con_bom {
      font-size: 0.75rem;
      color: #999;
      white-space: nowrap;
    }
  }

  .icon-zx_map_tel,
  .icon-zx_map_locate1,
  .icon-card_weixin {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    color: #1961F1;
    margin-right: 0.3125rem;
    font-size: 1.1875rem;
    flex-shrink: 0;
  }

  .icon-card_weixin {
    color: #10C86C !important;
    font-size: 2rem !important;
  }

  .icon-card_weixin::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #13D291;
    border-radius: 0.9375rem;
    opacity: .2;

  }

  .icon-zx_map_locate1::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #7AA6FF;
    border-radius: 0.9375rem;
    opacity: .2;

  }

  .icon-zx_map_tel::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #7AA6FF;
    border-radius: 0.9375rem;
    opacity: .2;
  }

  .code_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 0.75rem .625rem;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.125rem 0.75rem 1.125rem 0.9375rem;
    box-sizing: border-box;
  }

  .code_right::-webkit-scrollbar {
    display: none;
  }
}

.code-left {
  margin-right: 0.781rem;
  width: 3.063rem;
  height: 3rem;
  background-color: #fff;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
  border-radius: 0 1.5rem 1.5rem 0;
  display: flex;
  align-items: center;

  // position: fixed;
  // top: 12.706rem;
  // left: 0;
  // z-index: 10;
  .codeName {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 100%;
  }

  i {
    margin-right: 8px;
    font-size: 24px;
  }
}

#card_conter {
  .home_box {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 3.75rem;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(0, 0, 0, 0.8) url(//static-o2o.360buyimg.com/daojia/new/images/menu/bm.png) 0.4375rem 0.4375rem no-repeat;
    background-size: 4.0625rem 1.25rem;
    border: 0.0625rem solid #757575;
    border-radius: 0.25rem 0 0 0.25rem;
  }

  .y5.bothvisible {
    border-radius: 0.25rem 0 0 0;
  }

  .taphome {
    // width: 3.469rem;
    // height: 1.5rem;
    // background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.4);
    // border-radius: 0.75rem 0 0 0.75rem;
    border: solid 0.5px #1b8dfc;
    position: fixed;
    top: 23.2rem;
    right: 0;
    line-height: 1.5rem;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.2rem;
    border-bottom-left-radius: 2rem;
    border-top-left-radius: 2rem;

    .iconfont {
      font-size: 1.5rem;
    }

    a {
      font-size: 1rem;
    }
  }

  .tapcard {
    // width: 3.469rem;
    // height: 1.5rem;
    background-color: rgba(255, 255, 255, 0.4);
    color: #000;
    // border-radius: 0.75rem 0 0 0.75rem;
    border: solid 0.5px #1b8dfc;
    position: fixed;
    top: 26.5rem;
    right: 0;
    line-height: 1.5rem;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.2rem;
    border-bottom-left-radius: 2rem;
    border-top-left-radius: 2rem;

    .iconfont {
      font-size: 1.5rem;
    }

    a {
      font-size: 1rem;
    }
  }

  .y6 {
    position: absolute;
    right: -0.0625rem;
    bottom: 2.625rem;
    width: 5.9375rem;
    border: 0.0625rem solid #757575;
    background: rgba(0, 0, 0, 0.8);
  }

  .y6 a {
    display: block;
    padding-left: 1.375rem;
    border-bottom: 0.0625rem solid #4b4b4b;
    line-height: 2.1875rem;
    height: 2.1875rem;
    color: #fff;
    background-image: url(//static-o2o.360buyimg.com/daojia/new/images/icon/bmenu.png);
    background-repeat: no-repeat;
    background-size: 1rem 18.75rem;
  }

  .y8 {
    background-position: 0.625rem -3.125rem;
  }

  .y9 {
    background-position: 0.625rem -6.25rem;
  }

  .ya {
    background-position: 0.625rem -9.375rem;
  }

  .yb {
    background-position: 0.625rem -12.5rem;
  }

  .yc {
    background-position: 0.625rem -15.625rem;
    border: none;
  }

  .yd {
    position: absolute;
    bottom: -0.75rem;
    right: 0.625rem;
    width: 0;
    height: 0;
    z-index: 15;
    border-width: 0.375rem;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
    border-style: solid;
  }

  .goods_box_none {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    // background: #fff;
  }

  .loading {
    width: 100%;

    button {
      width: 100%;
      height: 2.8125rem;
      border: none;
      // background: #fff;
    }
  }

  .card_a {
    padding: 0.9375rem 0.75rem 1.25rem;

    .collect {
      position: relative;
      border-radius: 0.9375rem;
      min-width: 3.375rem;
      height: 3.375rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .icon-bc_like{
      color: #F15353;
      z-index: 1;
    }

    .people {
      font-size: 0.75rem;
    }

    .collect::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      background: #FFFFFF;
      border-radius: 0.9375rem;
      bottom: 0;
      opacity: 0.2;
    }

    .header_box {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/business_card_bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0;
      padding: 1.25rem 1rem 1.8438rem 0.9375rem;

      .header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;

        .iconfont {
          font-size: 1.5rem
        }

        .img {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 1.875rem;
          overflow: hidden;
          background: #f2f2f2;
          margin-bottom: 0.75rem;
          align-self: end;
          border: 2px solid #fff;

          img {
            width: 100%;
            height: 100%;
          }
        }

      }

      .per_info {
        text-align: left;
        .certification-box {
          margin: 0.5rem 0.625rem 0 0;
          height: 1rem;
          background: linear-gradient(318deg, rgba(255,211,154,0.85) 0%, rgba(255,229,97,0.13) 100%);
          border-radius: 6px;
          opacity: 1;
          .text{
            font-size: 0.5625rem;
            margin-right: 6px;
            color: #fff;
          }
        }
        .certification-box-bg-fff{
          background: linear-gradient(318deg, rgba(216,216,216,0.48) 0%, rgba(255,255,255,0.13) 100%);
        }

        .card-name {
          font-weight: bold;
          color: #FAFAFA;
          font-size: 1.3125rem;
        }

        .role-name {
          margin-right: 0.4375rem;
        }

        .role-name,
        .level-name {
          font-size: 0.875rem;
          color: #fff;
          font-weight: 500;
        }

        .items-center {
          align-items: center;
        }

        .fz-24 {
          font-size: 0.875rem !important;
        }

        li {
          // line-height: 1.5rem;
          margin-bottom: 0.375rem;
          display: flex;

          .icon-card_weixin {
            font-size: .6rem;
          }

          .icon-gongsi,
          .icon-zx_map_locate1 {
            font-size: .5rem;
            flex-shrink: 0;
          }

          .icon-zx_map_tel {
            font-size: .4rem;
            flex-shrink: 0;
          }


          i {
            position: relative;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/business_card_icon_bg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            text-align: center;
            color: #fff;
            margin-right: 0.3125rem;
            font-size: 0.5625rem;
            opacity: .8;
          }

          span {
            font-size: 14px;
            color: #fff;
          }

          a {
            font-size: 14px;
            color: #fff;
          }
        }

        .position {
          align-items: flex-start;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .sum_box {
      margin: 0.625rem 0;
      display: flex;
      justify-content: space-between;

      li {
        line-height: 2.5rem;
        display: flex;

        i {
          color: #50a6f9;
          font-size: 1.5rem;
          margin-right: 0.25rem;
        }

        span {
          font-size: 14px;
          color: #666;
        }
      }
    }

    .card_button {
      margin-top: 1.25rem;
      display: flex;

      /* justify-content: space-between; */
      button {
        flex: 1;
        width: 320px;
        border-radius: 1.5625rem;
        margin: 0 0.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        background: #fff;
        color: var(--themeBaseColor);
        font-size: 16px;
        border: none;
        border: solid 1px var(--themeBaseColor);
      }

      .other {
        border: none;
        color: #fff;
        border: solid 1px var(--themeBaseColor);
        background: var(--themeBaseColor);
      }
    }
  }

  .sum_box {
    background: #fff;
    padding: 0.625rem 1rem;
    display: flex;
    justify-content: space-between;

    li {
      line-height: 2.5rem;
      display: flex;

      i {
        color: #50a6f9;
        font-size: 1.5rem;
        margin-right: 0.25rem;
      }

      span {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .navBox {
    margin-top: 0.625rem;
    // min-height: 95vh;

    .titleco {
      font-weight: 600;
    }

    ::v-deep .van-tab--active {
      font-weight: 600 !important;
    }

    .boxHight {
      height: 29.781rem;
    }

    .loadNext {
      height: 3.438rem;
      width: 100%;
      text-align: center;
      font-size: 0.75rem;
      color: #ccc;
      line-height: 3.438rem;
      position: absolute;
      background: #fff;
      z-index: 10;
      bottom: -1px;
    }

    // 简介
    .intro {
      background: #fff;
      text-align: left;
      margin: 1.156rem 0.938rem 0.628rem 0.938rem;
      border-radius: 0.5rem;
      padding: 0.75rem;
      overflow: hidden;
      position: relative;

      .banner_box {
        padding: 0.625rem 0;

        .banner {
          width: 100%;
          min-height: 9rem;
          border-radius: 0.375rem;
          overflow: hidden;
          margin-bottom: 0.625rem;
          background: #f2f2f2;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .intro_text {
        // text-indent: 32px;
        // word-break: break-word;
      }
    }

    // 贴子和视频
    .tab_post {
      margin: 0 0.938rem 0.628rem 0.938rem;
      // background: #50a6f9;
      overflow: hidden;
      position: relative;

      .centen_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .show_box {
          width: 10.531rem;
          height: 18rem;
          background-color: #fff;
          box-shadow: 0 0 0.656rem 0 rgba(0, 0, 0, 0.1);
          border-radius: 0.344rem;
          display: flex;
          flex-direction: column;
          margin-top: 0.9rem;
          position: relative;

          .play {
            position: absolute;
            top: 40%;
            left: 40%;
          }

          .show_box_img {
            width: 100%;
            height: 14.094rem;

            // background: #aa45ff;
            img {
              width: 100%;
              height: 100%;
            }
          }

          .show_box_bottom {
            flex: 1;
            display: flex;
            flex-direction: column;

            .title {
              width: 100%;
              height: 2rem;
              line-height: 2rem;
              // background: red;
              text-align: left;

              p {
                font-size: 0.875rem;
                color: #000;
                margin-left: 0.5rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .user {
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding-left: 0.531rem;

              .tap_left {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img {
                  width: 1.188rem;
                  height: 1.188rem;
                  border-radius: 50%;
                  margin-right: 0.25rem;
                }

                .user_name {
                  font-size: 0.75rem;
                  color: #ccc;
                }
              }

              .like {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 0.531rem;

                i {
                  color: #000;
                  font-size: 0.781rem;
                }

                span {
                  font-size: 0.75rem;
                  color: #000;
                }
              }
            }
          }
        }
      }
    }

    // 精选文字
    .choiceness_text {
      background: #fff;
      margin: 1.0938rem 0.7813rem 0.628rem 0.7813rem;
      overflow: hidden;
      padding: 0.4688rem;
      position: relative;

      .text_box:last-child {
        border: none;
      }

      .text_box {
        height: 5.938rem;
        width: 100%;
        border-bottom: 1px solid #f7f7ff;
        margin-top: 0.5rem;

        .intext_box {
          width: 100%;
          height: 5.625rem;
          display: flex;
          justify-content: space-between;

          .intext_left {
            width: 13.125rem;
            height: 5.625rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;

            p {
              font-size: 0.875rem;
              color: #000;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              // text-indent: 10px;
              text-align: left;
              margin-left: 0.25rem;
            }

            .intext_left_bottom {
              font-size: 0.75rem;
              color: #999;
              margin-left: 0.25rem;
            }
          }

          .intext_img {
            width: 7.125rem;
            height: 5.625rem;
            border-radius: 0.438rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .user_box {
    // height: 1.75rem;
    padding: 0.4688rem 0.625rem;
    margin: 0 0.625rem 1.0625rem;
    background: #fff;
    border-radius: 0.3125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user_photo {
      height: 1.75rem;
      line-height: 1.75rem;

      span {
        font-size: 0.75rem;
        color: #666;
        margin-left: 0.5rem;
      }

      .pho1:first-child {
        margin: 0;
      }

      .pho1 {
        width: 1.75rem;
        height: 1.75rem;
        display: inline-block;
        margin-left: -0.5rem;
        float: left;
        background: #666;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }

    .user_txt {
      display: flex;
      align-items: center;

      .icon-zb_like {
        color: var(--themeBaseColor);
      }

      i {
        font-size: 1.3rem;
        margin-right: 0.3125rem;
      }

      p {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #00001C;
        margin-right: 0.188rem;
      }
    }
  }

  .my_achieve {
    padding: 0 0.75rem;

    .code_right2 {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      padding: 1.125rem 0.625rem 0 0.625rem;

      .contact_box3 {
        min-width: 33.33%;
        display: flex;
        justify-content: space-between;
        text-align: left;
        flex-direction: column;
        white-space: nowrap;


        .con_top {
          min-width: 6.5rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.75rem;
          color: #6E6E79;
        }

        .con_bom {
          color: #00001C;
          font-weight: 500;
          margin-top: 0.3125rem;
          font-size: 1rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-bottom: 1.125rem;
          box-sizing: border-box;
        }
      }

    }

    .title {
      height: 0.9375rem;
      line-height: 0.9375rem;
      display: flex;
      align-items: center;
      text-align: left;
      font-weight: bold;
      font-size: 0.9375rem;
      margin-bottom: 0.75rem;
    }

    .look_number {
      display: flex;
      justify-content: space-around;
      border-bottom: solid 0.0625rem #ebebeb;
      padding: 0.625rem 0;

      li {
        line-height: 1.625rem;

        span:first-child {
          font-size: 16px;
        }

        span:last-child {
          color: #8c8c8c;
          font-size: 12px;
        }

        font {
          font-size: 12px;
        }
      }
    }

    .custom_number {
      display: flex;
      flex-wrap: wrap;
      padding: 0.625rem 0;

      li {
        width: 50%;
        line-height: 1.625rem;

        span:first-child {
          font-size: 16px;
        }

        span:last-child {
          color: #8c8c8c;
          font-size: 12px;
        }

        font {
          font-size: 12px;
        }
      }

      li:first-child,
      li:nth-child(2) {
        margin-bottom: 0.625rem;
      }

      li:nth-child(2n + 1) {
        border-right: solid 0.0625rem #ebebeb;
      }
    }
  }

  .my_synopsis {
    background: #fff;
    margin-top: 0.625rem;
    padding: 0 0.9375rem;

    .title {
      height: 2.5rem;
      line-height: 2.5rem;
      display: flex;
      align-items: center;

      .block {
        width: 0.25rem;
        height: 1rem;
        background: #50a6f9;
        border-radius: 0.0625rem;
        margin-right: 0.375rem;
      }

      span {
        font-weight: bold;
        font-size: 16px;
      }
    }

    .synopsis_text {
      padding: 0.625rem 0;

      p {
        background: #fafafa;
        border-radius: 0.25rem;
        max-height: 6.25rem;
        padding: 0.625rem;
        font-size: 15px;
        line-height: 1.5rem;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
      }
    }
  }

  .my_voice {
    background: #fff;
    margin-top: 0.625rem;
    padding: 0 0.9375rem;

    .title {
      height: 2.5rem;
      line-height: 2.5rem;
      display: flex;
      align-items: center;

      .block {
        width: 0.25rem;
        height: 1rem;
        background: #50a6f9;
        border-radius: 0.0625rem;
        margin-right: 0.375rem;
      }

      span {
        font-weight: bold;
        font-size: 16px;
      }
    }

    .voice_box {
      padding: 0.625rem 0;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        font-size: 2rem;
        color: #fff;
      }

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        width: 15rem;
        height: 2.5rem;
        color: #fff;
        background: #50a6f9;
        border-radius: 0.375rem;
        margin-left: 1.25rem;
      }
    }
  }

  .recommend_seller {
    // background: #fff;
    margin-top: 0.625rem;

    .supplier-title {
      text-align: left;
      font-weight: bold;
      font-size: 0.9375rem;
      margin-left: 0.75rem;
    }

    .seller_box {
      background-color: #fff !important;
    }

    .goods_list {
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.75rem;
      // justify-content: space-evenly;
    }

    .goods_text {
      text-align: left;
      padding: 0.5625rem 0.625rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      // .name{
      //   height: 2.5rem;
      //   line-height: 2.5rem;
      // }
    }

    .goods_box {
      width: 49%;
      background: #fff;
      border-radius: 0.3125rem;
      margin-bottom: 0.625rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .goods_box:nth-child(odd) {
      margin-right: 1%;
    }

    .goods_box:nth-child(even) {
      margin-left: 1%;
    }
    .icon-shangjia,.icon-dianpu1,.icon-gongsi{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3rem !important;
      height: 3rem !important;
      border-radius: 100% !important;
      font-size:1.5rem !important;
      color:#fff;
      padding: 0 !important;
    }
    .icon-shangjia{
      background-color: #1961F1;
    }
    .icon-dianpu1{
      background-color: #10C86C;
    }
    .icon-gongsi{
      background-color: #7544FF;
    }
    .title {
      line-height: 1;
      text-align: left;
      font-weight: bold;
      font-size: .9375rem;
      color: #00001C;
      margin: .75rem;
      img {
        margin: 0;
      }

      .block {
        width: 0.25rem;
        height: 1rem;
        background: #50a6f9;
        border-radius: 0.0625rem;
        margin-right: 0.375rem;
      }

      span {
        font-weight: bold;
        font-size: 0.75rem;
      }
    }

    .apply_list {
      background: #fff;
      display: flex;
      justify-content: space-between;
      border-radius: 0.3125rem;
      margin: .75rem .75rem 1.0938rem;

      .icon-card_apply_a {
        background: rgba(251, 104, 82, 0.06);
        color: #fb6852;
      }

      .icon-card_apply_b {
        background: rgba(255, 205, 69, 0.06);
        color: #ffcd45;
      }

      .icon-card_apply_c {
        background: rgba(170, 69, 255, 0.06);
        color: #aa45ff;
      }

      .apply_box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .9375rem;

        .iconfont {
          width: 2.5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          font-size: 2rem;
          border-radius: 0.25rem;

          /* margin-right: 0.625rem; */
          padding: 0.25rem;
        }

        .apply {
          line-height: 1.25rem;
          text-align: center;

          .apply_a {
            font-weight: 400;
            font-size: .75rem;
            color: #00001C;
            margin-top: .625rem;
            line-height: 1;
          }

          .apply_b {
            color: #8c8c8c;
            font-size: 12px;

            i {
              margin-left: 0.375rem;
            }
          }
        }
      }
    }

    .seller_list {
      margin: 0.75rem 0.75rem 0.625rem;
      border-radius: 0.5rem;
      overflow: hidden;
      // padding: 0.625rem 0.9375rem;

      .seller_box {
        display: flex;
        align-items: center;
        background: #fafafa;
        padding: .75rem;
        width: 100%;
        margin-bottom: 0.625rem;

        .header {
          width:3.75rem;
          height:3.75rem;
          margin-right: 0.625rem;
          background: #fff;

          img {
            border-radius: .5rem;
            width: 100%;
            height: 100%;
          }
        }
        .fa-angle-right{
          color: #AAAAB3;
          font-weight: bold;
          font-size: 2.5rem;
        }

        .name {
          text-align: left;
          width: 15rem;

          li {
            line-height: 1.5rem;
            font-weight: bold;
            font-size: 1.125rem;
            color: #00001C;
          }

          .position {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #8c8c8c;

            i {
              font-size: 1.25rem;
              margin-right: 0.375rem;
            }

            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-weight: 400;
              font-size: .75rem;
              color: #6E6E79;
            }
          }
        }

        .fa {
          width: 2.5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          font-size: 1.25rem;
          color: #ccc;
          position: absolute;
          right: 0.625rem;
        }
      }

      .seller_box:last-child {
        margin-bottom: 0;
      }
    }
  }

  .my_store {
    // background: #fff;
    margin-top: 0.625rem;
    padding: 0 0.75rem;

    .goods_lists {
      padding: 0.625rem 0 0;
    }


    img {
      margin: 0;
    }

    .title {
      text-align: left;
      font-size: 0.9375rem;
      font-weight: bold;
      margin-bottom: 0.75rem;
    }

    .store_info {
      background: #fff;
      padding: 0.9375rem 0.625rem 0;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;

      .header_box {
        display: flex;
        justify-content: space-between;

        .header {
          width: 3.4375rem;
          height: 3.4375rem;
          overflow: hidden;
          margin-right: 0.625rem;
          background: #f2f2f2;
          border-radius: 0.25rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          li {
            // line-height: 3rem;
            font-size: 16px;
          }

          .name_l1 {
            font-size: 1.125rem;
            display: flex;
            font-weight: bold;
            color: #00001C;
            margin-bottom: 0.7813rem;

            span {
              flex: 1;
              white-space: nowrap;
              width: 8.93rem;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: left;
            }
          }

          .name_time {
            font-size: 0.75rem;
            color: #6E6E79;
            text-align: left;
            margin-bottom: 0.3rem;
          }

          .name_phone {
            text-align: left;
            color: #666;
            font-size: 0.75rem;
            margin-bottom: 0.3rem;
          }

          .name_address {
            text-align: left;
            color: #666;
            font-size: 0.75rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .info_list {
      border-bottom: solid 0.0625rem #ebebeb;
      padding: 0.625rem 0;

      li {
        display: flex;
        line-height: 1.625rem;
        text-align: left;

        i {
          font-size: 1.25rem;
          color: #999;
          margin-right: 0.375rem;
        }

        span {
          font-size: 13px;
          color: #666;
        }
      }
    }

    .into_list {
      padding: 0.8438rem 0.75rem 0.9375rem;
      background: #fff;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;

      .icon-icon_more1 {
        flex: 1;
        text-align: right;
        color: #AAAAB3;
        font-size: .8rem;
      }

      .icon-gouwuche2,
      .icon-manefanxian {
        color: #000000;
        font-size: 1.35rem;
      }

      li:first-child {
        margin-bottom: 0.625rem;
      }

      li {
        display: flex;
        align-items: center;
        text-align: left;
        position: relative;
        background: #FAFAFA;
        border-radius: 0.625rem;
        padding: 0.8438rem 0.7813rem 0.7813rem 0.8438rem;

        span {
          margin-left: 0.5313rem;
          font-size: 0.875rem;
          color: #000;
          font-weight: 500;
        }
      }
    }
  }

  .recommend_goods {
    margin-top: 1.0625rem;

    .title {
      text-align: left;
      font-weight: bold;
      margin-bottom: 0.75rem;
      margin-left: 0.9375rem;
      font-size: 0.9375rem;
    }

    .goods_text {
      padding: 0 0.3125rem 0 0.594rem;
      text-align: left;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 14px;
        // height: 2.5rem;
        // line-height: 1.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-weight: 600;
      }

      .price {
        height: 0.875rem;
        line-height: 0.875rem;
        color: #F15353;
        font-size: 0.875rem;
        margin-top: 0.625rem;
        font-weight: 500;
      }

      .price_b {
        width: 1.5rem;
        height: 1.5rem;
        background-color: var(--themeBaseColor);
        color: #fff;
        border-radius: 50%;
        text-align: center;
        float: right;
        line-height: 1.5rem;
        margin-left: 0.4688rem;

        i {
          color: #fff;
        }
      }
    }

    .goods_list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 0.75rem;
      padding: 0.8125rem 0.75rem 0.75rem;
      border-radius: 0.5rem;
      background: #FFFFFF;

      .goods_box {
        width: 100%;
        display: flex;
        align-items: center;
        box-shadow: none;
        padding-bottom: 0.75rem;

        .img {
          width: 4.5rem;
          height: 4.5rem;
          overflow: hidden;
          border-radius: 0.625rem;

          img {
            width: 100%;
            height: 100%;
          }
        }


      }

      .goods_box:nth-child(2n) {
        margin-right: 0;
      }
    }
  }

  .goods_lists {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.625rem 0;

    .goods_lists-loading {
      width: 100%;
      padding: 1rem;
      text-align: center;
    }

    .goods_box {
      width: 10.531rem;
      margin: 0.2rem 0;
      // padding: 0 0.2rem;
      background: #fff;
      // box-shadow: 0 0 0.656rem 0 rgba(0, 0, 0, 0.1);
      border-radius: 0.3125rem;

      .img {
        width: 100%;
        // height: 44vw;
        height: 10.5938rem;
        overflow: hidden;
        border-radius: 0.35rem 0.35rem 0 0;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .goods_text {
        padding: 0.5625rem 0.625rem 0.6563rem;
        text-align: left;

        .name {
          font-size: 14px;
          // height: 2.5rem;
          // line-height: 1.25rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price {
          display: flex;
          flex-direction: column-reverse;

          .price_a {
            color: #e64a40;
            font-size: 0.75rem;
            font-weight: bold;

            font {
              font-size: 12px;
            }
          }

          .price_b {
            font-size: 0.625rem;
            color: #8c8c8c;
            text-decoration: line-through;
            margin-top: 0.2rem;
            margin-bottom: 0.3rem;
          }
        }
      }
    }

    .goods_box:nth-child(2n) {
      margin-right: 0;
    }
  }

  .coupon {
    overflow: hidden;
    overflow-x: auto;

    #coupon_box {
      .coupon_bg_box::-webkit-scrollbar {
        display: none;
      }

      .coupon_bg_box {
        padding: 0.625rem 0 0;
        display: flex;
        overflow: hidden;
        overflow-x: auto;

        .coupon_bg {
          min-width: 8.75rem;
          background-color: #fff;
          border-radius: 0.3125rem;
          margin-right: 0.625rem;
          position: relative;
          padding: 0.5625rem 0.5rem 0.5938rem 0.625rem;
          display: inline-table;

          .coupon_info {
            // text-align: center;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .info_top {
              font-size: 0.6875rem;
              color: #6E6E79;
              text-align: left;
            }

            .info_bottom {
              color: #F15353;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 16px;

              font {
                font-weight: bold;
                font-size: 0.9375rem;
                line-height: 1.875rem;
              }

              span {
                font-weight: normal;
                font-size: 0.625rem;
              }

              .receive {
                line-height: 1.25rem;
                display: block;
                width: 3.25rem;
                height: 1.25rem;
                background-image: url(../../assets/images/coupon_receive.png);
                background-size: 3.5rem 1.25rem;
                background-repeat: no-repeat;
                font-size: 12px;
                color: #fff;
                border-radius: 0.625rem;
                padding: 0 0.25rem;
              }
            }

            // li:first-child {
            //   width: 100%;
            //   border-top: dashed 1px #fff;
            //   line-height: 1.25rem;
            //   text-align: center;
            //   position: absolute;
            //   bottom: 0;
            //   font-size: 12px;
            //   color: #fff;
            // }
          }

          .spare_left {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #fafafa;
            border-radius: 0.25rem;
            position: absolute;
            left: -0.25rem;
            bottom: 1rem;
          }

          .spare_right {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #fafafa;
            border-radius: 0.25rem;
            position: absolute;
            right: -0.25rem;
            bottom: 1rem;
          }
        }
      }
    }
  }

  .my_img {
    background: #fff;
    margin-top: 0.625rem;
    padding: 0 0.9375rem;

    .title {
      height: 2.5rem;
      line-height: 2.5rem;
      display: flex;
      align-items: center;

      .block {
        width: 0.25rem;
        height: 1rem;
        background: #50a6f9;
        border-radius: 0.0625rem;
        margin-right: 0.375rem;
      }

      span {
        font-weight: bold;
        font-size: 16px;
      }
    }

    .banner_box {
      padding: 0.625rem 0;

      .banner {
        width: 100%;
        min-height: 9rem;
        border-radius: 0.375rem;
        overflow: hidden;
        margin-bottom: 0.625rem;
        background: #f2f2f2;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .reward_bg {
    position: relative;
    width: 15rem;
    margin: 0 auto;
    height: 19.5rem;
    background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/reward_bg.png");
    background-size: 15rem 19.5rem;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;

    .reward_text {
      color: #fff;
      text-align: center;

      .title {
        margin: 7.8rem 0 1.1rem 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: #670D0D;
      }

      .number {
        font-size: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.1rem;
        // color: #ffeb12;

        display: flex;

        img {
          margin: 0 0.3125rem 0 0;
        }

        .count {
          color: #E12235;
          font-size: 1.15rem;
          font-weight: 800;
        }

        .custom-name {
          font-size: 0.95rem;
          font-weight: 800;
          color: #670D0D;
          margin-right: 0.2rem;
        }

        // span {
        //   font-size: 14px;
        //   margin-left: 0.375rem;
        // }
      }
    }

    .reward_btn {
      position: absolute;
      bottom: 5%;
      left: 50%;
      background: #66a4f1;
      width: 9rem;
      height: 2.4375rem;
      border: none;
      color: #fff;
      font-size: 0.625rem;
      border-radius: 2rem;
      transform: translateX(-50%);
      opacity: 0;
    }
  }

  .close-popup {
    color: white;
    font-size: 2rem;
    margin: 1.3rem 0 0 0.4rem;
  }
}

.popupImg {
  overflow: hidden;
  position: relative;
  padding-top: 1rem;

  img {
    width: 90%;
    height: auto;
    border-radius: 10px;
  }

  .icon-adsystem_icon_cancle {
    font-size: 2rem;
    color: #000;
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 999;
  }

  .saveImgBtn {
    width: 7rem;
    padding: 0.3325rem 0;
    margin: 0 auto;
    color: #fff;
    background: var(--color);
    border-radius: 0.1563rem;
    margin-top: 1rem;
  }
}
.van-tabs ::v-deep .van-tab__text {
  font-size: 0.9375rem;
}
</style>
